// 导入：类型、接口、模块、组件、样式
import { Component } from "react";
class Index extends Component {
  // 1 子继承父拥有父的所有属性和方法
  // 2 同步则子覆盖父 constructor不能覆盖（1-子不写，2-子写super调用父的 constructor

  // constructor(props: any) {
  //   super(props); // 调用父的constructor
  //   this.state = { 键: 值 };
  // }

  state = {
    // 键: 数据
    num: 6,
  };

  render() {
    // 细节1 this是谁、细节2 this直接+1仅内存、 细节3 setState一个函数语法、细节4 死循环

    // 类组件中的this 是当前组件对象   里面有state、props、refs、setState等等
    // console.log(666, this);
    const { num } = this.state;

    // this.setState({
    //   // 1-内存变化，2-会重新render
    //   num: num + 1,
    // });

    return (
      <fieldset>
        <legend>类组件状态</legend>

        <h1>{num}</h1>

        {/* 
        传统JS分DOM0、DOM2事件语法
        document.qs(选择器).onclick = function() {}
        document.qs(选择器).addEventListener('事件类型', 处理函数)
        
        <标签名 @click="处理函数"></标签名>
        <标签名 onClick={处理函数}></标签名>
        细节1：小驼峰
        细节2：写jsx了就不能加引号
        */}
        <button
          onClick={() => {
            // this.setState(对象/函数, 处理函数)
            // this.state.num++;
            // this.setState(
            //   {
            //     // 这个函数底层会做两个动作：1-变内存数据，2-让render函数重新触发
            //     // num: 原数据+1
            //     num: num + 1,
            //   },
            //   () => {
            //     console.log(
            //       "a 每次点击请求接口获取下一页数据：",
            //       this.state.num
            //     );
            //   }
            // );
            // console.log("b 每次点击请求接口获取下一页数据：", this.state.num);
            // let a = 1; // 第一个变量a 数据存1  默认编辑器会类型推论  number
            // interface Ib {
            //   data1: number;
            //   data2: string;
            // }
            // let b: Ib = { data1: 1, data2: "dsafda" }; // 对象类型限制  你可以用interface、type 还可以直接写
            // let c: { data1: number; data2: string } = {
            //   data1: 1,
            //   data2: "dsafda",
            // }; // 对象类型限制  你可以用interface、type 还可以直接写
            // this.setState((oldState: { num: number }, oldProps) => {
            //   return {
            //     // num: 旧数据+1
            //     num: oldState.num + 1,
            //   };
            // });
            // ...
          }}
        >
          点击+1
        </button>
      </fieldset>
    );
  }
}
export default Index;
